<template>
  <div class="register">
    <div class="container">
      <h1><img src="http://www.yhachina.com/images/logo.png" alt="" /></h1>
      <div class="content">
        <h2>
          <span
            >欢迎登录YHA
            <p>®</p>
            青年旅舍
            <p>®</p></span
          >
        </h2>
        <div class="demo-input-suffix">
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-input placeholder="手机号" v-model="form.phone">
                <i slot="prefix" class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="密码" v-model="form.pwd">
                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
          </el-form>

          <div class="zidong">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="自动登录"></el-checkbox>
            </el-checkbox-group>
            <p>忘记密码 ? <a>点击重置>></a></p>
          </div>

          <el-button type="warning" round size="medium" @click="submit"
            >登录</el-button
          >

          <p>
            还没有注册？使用第三方帐号登录 或
            <router-link to="/register"><a href="">注册账号>></a></router-link>
          </p>
          <div class="login">
            <el-button round>QQ登录</el-button>
            <el-button round>微信登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        user: "",
        phone:"",
        pwd: "",
        // pwd2:'',
        // phone:'',
        // yz:''
      },
      // input1: '',
      // input2: '',
      // input3: '',
      // input4: '',
      // input5: '',
      checkList: ["选中且禁用", "复选框 A"],
    }
  },
  methods: {
    submit() {
      console.log(this.form.phone);
      if (this.form.phone == "" || this.form.pwd == "") {
        this.$message("请输入账号密码")
      } else {
        let url = "http://localhost:3000/v2/qnls/login"
        var params = `phone=${this.form.phone}&pwd1=${this.form.pwd}`
        this.axios.post(url, params).then(res => {
          console.log(res)
          if (res.data.code == 200) {
            console.log("注册成功")
            this.$store.commit("updateUser_id", res.data.result[0].id)
            this.$router.push("/")
          } else {
            this.$message(res.data.msg)
            this.form.phone = ""
            this.form.pwd = ""
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(http://www.yhachina.com/images/login-registration/login-bg.jpg)
    no-repeat center;
  background-size: cover;
}
.register .container {
  padding: 30px 0 10px 0;
  width: 580px;
  margin: 20px auto;
  text-align: center;
}
.register .container .content {
  background-color: #f4fbff;
  height: 453px;
  margin: 30px;
  border-radius: 8px;
}
.register .container .content h2 {
  height: 60px;
  line-height: 60px;
  font-size: 30px;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;
}
.register .container .content h2 span {
  border-bottom: 3px solid #f7941c;
}
.register .container .content h2 span p {
  vertical-align: super;
  display: inline-block;
  font-size: 20px;
}
.register .container .content .zidong {
  width: 430px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.demo-input-suffix {
  margin-top: 30px;
}
.el-form-item {
  margin-bottom: 0;
}
.el-input {
  width: 430px;
  height: 70px;
}
i {
  margin-top: -13px;
}
.el-button {
  width: 430px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}
p a {
  text-decoration: none;
  color: #f7941c;
  cursor: pointer;
  margin-left: 5px;
}
p:nth-child(5) {
  display: flex;
  justify-content: flex-start;
  margin-left: 50px;
  padding-top: 30px;
  font-size: 14px;
}
.login .el-button {
  width: 200px;
  height: 40px;
  padding-top: 10px;
}
</style>
